導覽列是部落格非常重要的一個部分，沒有導覽列就無法順利切換文章。

在 Nuxt Content 中有底下這三個屬性可以讓我們來運用 v-for 迴圈快速產生導覽列，但在這之前，我們需要知道頁面存在哪些資訊。

{
  "title": "Page title",
  "_path": "/my-directory/my-page",
  "_id": "content:my-directory:page.md"
}

目錄結構

Content 會掃描專案的 content 資料夾內的檔案，使用樹狀的 Json 格式來生成導覽的物件，以下面這個結構為例，my-directory 是一個節點，底下的 page.md 是實際的頁面。

content/
  my-directory/
    page.md

自訂頁面導覽資訊

如果用過 Hexo 或是其他基於 Markdown 的部落格產生工具，應該對以下的寫法不陌生，Content 也可以使用這種方式來定義頁面的資訊。

---
navigation:
  title: 'Home'
  icon: '?'
---

# Welcome

除了文章頁面外，也可以撰寫 _dir.yml 來定義節點（資料夾）的資訊，只要把 _dir.yml 檔案放到要修改的資料夾內就可以了。

title: 'My awesome directory'
navigation.icon: '?'

如果覺得上面的資訊不夠充足，也可以修改 nuxt.config 來加入其他的屬性，例如發佈時間、修改時間...等。

• 先在 nuxt.config 加入需要的屬性

defineNuxtConfig({
  content: {
    navigation: {
      fields: ['author', 'publishedAt']
    }
  }
})

• 再回到 .md 檔案加入屬性的值

---
title: My Page
author: 'Sébastien Chopin'
publishedAt: '15-06-2022'
---

例外檔案

如果有特定的檔案或資料夾不想要被生成到導覽路由中，可以在 .md或_dir.yml修改以下設定，就不會被加入 navigation 了。

• .md

---
navigation: false
---

• _dir.yml

navigation: false

<ContentNavigation>

對頁面資訊了解後，就可以來使用 <ContentNavigation> 這個元件製作導覽列了：

1. 在 components 資料夾中新增 Navbar.vue
2. 加入以下官方範例程式：

<template>
  <nav>
    <ContentNavigation v-slot="{ navigation }">
      <div v-for="link of navigation" :key="link._path">
        <NuxtLink :to="link._path">{{ link.title }}</NuxtLink>
      </div>
    </ContentNavigation>
  </nav>
</template>

3. 在 app.vue 或是 layouts 的元件中引用這個元件

<template>
 // ...
 <Navbar></Navbar>
 // ...
</template>

4. run 專案查看成果。

補充：如果發現導覽列都不會更新的話，可以把 .nuxt 這個資料夾砍掉，重新執行專案。

官方原始文件參考